<template>
    <div class="comm-wrapper">
        <top-header title="我的车辆" title-left="添加" @leftClick="addCar"></top-header>
        <list class="item-container"
                offset-accuracy="50px">
            <refresh @refresh="loadingDown(index)"></refresh>
            <cell class="border-cell"></cell>
            <cell v-for="(demo,key) in carArray"
                    class="cell"
                    :key="key">
                <div class="content">
                    <text class="content_first">{{demo.carname}}</text>
                    <div class="cont_owner">
                        <text class="cont_owner_text">{{demo.ownername}}</text>
                        <text class="cont_owner_text">{{demo.ownerphone}}</text>
                    </div>
                    <div class="content_four">
                        <WxcButton @wxcButtonClicked="toUpdate(demo.id)" class="content_four_text" type="white" size="medium" text="编辑"></WxcButton>
                        <WxcButton @wxcButtonClicked="deleteCars(demo.id)" class="content_four_text" type="white" size="medium" text="删除"></WxcButton>
                    </div>
                </div>
            </cell>
            <cell class="no-order" v-if="carArray.length<=0">
                <image src="bmlocal://assets/acw/wuwangluo.png" class="noOrderImg"></image>
                <text class="noOrderTxt">暂无记录</text>
            </cell>
            <loading class="comm-loading" @loading="onloading" :display="showLoading">
                <loading-indicator class="comm-indicator" v-if="!lastPage"></loading-indicator>
                <text class="comm-indicator-text" >{{loadingText}}</text>
            </loading> 
        </list>
    </div>
</template>
<script>
import { WxcButton } from 'weex-ui';
import header from '../common/header'
export default {
    components: { 
        WxcButton,
        'top-header': header, 
    },
    data () {
        return {
            token: '',
            carArray: [],
            stroeId: '',
            servicePage: {
                "limit": 6,
                "order": "asc",
                "page": 1,
                "sort": "id",
                "uid": '', // 100068 
            },
            showLoading: 'hide',
            index: '',
            lastPage:false,//是否是最后一页
            loadingText:'加载中 ...',
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.servicePage.uid = user.id
        this.getCarList()
    },
    eros: {
        beforeBackAppear (params, options) {
            console.log('beforeBackAppear');
            this.carArray = []
            this.getCarList()
        },
    },
    mounted () {
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        // 添加车辆
        addCar () {
            this.$router.open({
                name: 'acw.service.maintennace.addcar',
                type: 'PUSH'
            });
        },
        callPhone (phone) {
            this.$coms.call(phone)
        },
        
        loadingDown(index) {
            this.carArray = []
            this.servicePage.page = 1
            this.getCarList()
        },
        onloading() {
            this.servicePage.page = this.servicePage.page + 1;
            
            this.showLoading = 'show';
            if(!this.lastPage) {
                this.getCarList();
            } 
            setTimeout(() => {
                this.showLoading = 'hide'
            }, 600)
            
        },
        // 查询车辆列表
        getCarList () {
            let vm = this;
            this.$notice.loading.show();
            this.$fetch({
                method: 'POST',    // 大写
                name: 'maintenanceCar.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: this.servicePage
            }).then(resData => {
                // 成功回调
                
                if(resData && resData.errno == 0){
                    var list = resData.data.items
                    // this.$notice.alert({ message: JSON.stringify(resData.data)})
                    if(vm.servicePage.page ==1){
                        vm.carArray = [];
                    }else{
                        setTimeout(() => {
                            vm.showLoading = 'hide'
                        }, 500)
                    }
                    list.forEach((item, i) => {
                        vm.carArray.push(item)
                    });
                    if(resData.data && vm.carArray.length >= resData.data.total){
                        this.lastPage = true;
                        this.loadingText = '没有更多'
                    }
                } 
                this.$notice.loading.hide();
            }, error => {
                // 错误回调
                setTimeout(() => {
                    vm.showLoading = 'hide'
                }, 500)
                console.log(error)
                reject(error)
                // this.$notice.toast({ message: "登录失败, 请重试"})
            })
        },
        // 删除汽车
        deleteCars (id) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'maintenanceCar.delete', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {'id': id}
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                // this.$notice.toast({ message: resData.data})
                if(resData && resData.errno == 0){
                    this.$notice.toast({ message: '删除成功'})
                    this.loadingDown()
                } else {
                    this.$notice.toast({ message: '删除失败'})
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 修改汽车
        toUpdate (id) {
            this.$router.open({
                name: 'acw.my.updatecar',
                type: 'PUSH',
                params: id
            });
            return
        },
    }
}
</script>
<style lang="scss" src='./mycar.scss'></style>